/**
 * 个人中心下拉菜单
 */
import React, { useEffect, useState } from 'react';
import { Menu, Avatar, Dropdown, message } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import { useHistory } from 'umi';
import { getToken, removeToken } from '@/utils/status';
import UserAvatar from './UserAvatar';
import ChangePassword from './ChangePassword';
import { loginApi } from '@/api/login';
import { logoutUrl } from '@/urls/url';

const PersonalCenter = () => {
  /**用户信息 */
  const aaa = 1232;
  const [userInformation, setUserInformation] = useState<any>({});
  const getUserInformation = async () => {};
  useEffect(() => {
    const res = getToken();
    setUserInformation(res);
    getUserInformation();
  }, []);
  /**个人中心 */
  const [isPerson, setIsPerson] = useState(false);
  const showisPerson = () => {
    setIsPerson(true);
  };
  /**修改密码 */
  const [isChangePassword, setIsChangePassword] = useState(false);
  const showChangePassword = () => {
    setIsChangePassword(true);
  };
  /** 退出登录*/
  const history = useHistory();
  const logOut = async () => {
    history.push('./login');
    removeToken();
    const { data } = await loginApi(logoutUrl);
    message.success(data.message);
  };
  /** 头像下拉菜单*/
  const menu = (
    <Menu
      items={[
        {
          key: '1',
          label: <a onClick={showChangePassword}>修改密码</a>,
        },
        {
          key: '2',
          label: <a onClick={logOut}> 退出登录</a>,
        },
      ]}
    />
  );
  return (
    <>
      <div style={{ float: 'right', marginRight: 50 }}>
        <Dropdown overlay={menu} placement="bottomLeft" arrow>
          <div onClick={showisPerson}>
            <Avatar src="https://joeschmoe.io/api/v1/random" />
            {userInformation.userName}
            <DownOutlined style={{ marginLeft: 6 }} />
          </div>
        </Dropdown>
      </div>
      <UserAvatar isPerson={isPerson} setIsPerson={setIsPerson} />
      <ChangePassword
        isChangePassword={isChangePassword}
        setIsChangePassword={setIsChangePassword}
      />
    </>
  );
};
export default PersonalCenter;
